<template>
    <div class="bg">
        <div class="tips">
            <p class="title">{{title}}</p>
            <p class="content">
                {{content}}
            </p>

            <div class="btn">
                <a href="javascript:;" @click="noExit">取消</a>
                <a href="javascript:;" @click="Exit">确认</a>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:"Bg-Component",
        props:['title','content'],
        data(){
            return {
                isExit : null
            }
        },
        methods: {
            noExit(){
                this.isExit = false
                setTimeout(()=>{
                    this.isExit = null
                },20)
            },
            Exit(){
                this.isExit = true
                setTimeout(()=>{
                    this.isExit = null
                },20)
            }
        },
        watch:{
            isExit(){
                this.$emit('isExit',this.isExit)
            }
        }
    }
</script>

<style scoped lang="less">
    .bg{
        width: 100%;
        height: 100%;
        position: fixed;
        background: rgba(0, 0, 0, 0.342);
        z-index: 100000;
        top: 0;

        .tips{
            width: 74.7vw;
            height: 40vw;
            background: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            border-radius: 4vw;

            .title{
                font-size: 3.7vw;
                text-align: center;
                padding: 4vw 0;
            }

            .content{
                font-size: 3.7vw;
                text-align: center;
                padding: 0 2.7vw 4vw 2.7vw;
                line-height: 6.7vw;
            }

            .btn{
                width: 100%;
                height: 9.3vw;
                display: flex;
                border-top: 0.3vw solid rgb(238, 237, 237);

                a{
                    display: flex;
                    color: #1272FE;
                    text-decoration: none;
                    width: 50%;
                    justify-content: center;
                    align-items: center;
                }

            }


        }
    }
</style>